package myJs.myPkg.reactBootstrap

import japgolly.scalajs.react.CtorType.ChildArg
import japgolly.scalajs.react.facade.React
import japgolly.scalajs.react.vdom.{VdomElement, VdomNode}
import japgolly.scalajs.react.{Children, JsComponent, JsFnComponent}
import myJs.cps.DraggableModalDialogCp
import slinky.readwrite._
import japgolly.scalajs.react.vdom.all._

import scala.scalajs.js
import scala.scalajs.js.annotation.JSImport
import cats.effect._
import cats.effect.unsafe.implicits._
import japgolly.scalajs.react.util.EffectCatsEffect._

object Modal {
  case class Props(
      onHide: js.UndefOr[js.Function0[Unit]],
      show: js.UndefOr[Boolean] = js.undefined,
      bsClass: js.UndefOr[String] = js.undefined,
      dialogComponentClass: js.UndefOr[String] = js.undefined,
      backdropClassName: js.UndefOr[String] = js.undefined,
      dialogClassName: js.UndefOr[String] = js.undefined,
      dialogAs: MyReactComponentClass[_],
      contentClassName: js.UndefOr[String] = js.undefined,
      size: js.UndefOr[String] = js.undefined,
      bsPrefix: js.UndefOr[String] = js.undefined,
      scrollable: js.UndefOr[Boolean] = js.undefined
  )

  @js.native
  @JSImport("react-bootstrap", "Modal")
  object RawComponent extends js.Object {

    val Dialog: js.Object = js.native

    val Header: js.Object = js.native

    val Title: js.Object = js.native

    val Body: js.Object = js.native

    val Footer: js.Object = js.native

  }

  object Dialog {
    case class Props(
        dialogClassName: js.UndefOr[String] = js.undefined,
        centered: js.UndefOr[Boolean] = js.undefined,
        contentClassName: js.UndefOr[String] = js.undefined,
        scrollable: js.UndefOr[Boolean] = js.undefined,
        size: js.UndefOr[String] = js.undefined,
        bsPrefix: js.UndefOr[String] = js.undefined
    )

    val Component = JsFnComponent[ObjectOrWritten[Props], Children.Varargs](RawComponent.Dialog)

  }

  object Header {
    case class Props(
        bsPrefix: js.UndefOr[String] = js.undefined,
        closeButton: js.UndefOr[Boolean] = js.undefined
    )

    val Component = JsComponent[ObjectOrWritten[Props], Children.Varargs, Null](RawComponent.Header)

    def apply(
        bsPrefix: js.UndefOr[String] = js.undefined,
        closeButton: js.UndefOr[Boolean] = js.undefined
    )(children: ChildArg*) = {
      Component(
        Props(
          bsPrefix,
          closeButton
        )
      )(children: _*)
    }

  }

  object Title {
    case class Props()

    val Component = JsComponent[ObjectOrWritten[Props], Children.Varargs, Null](RawComponent.Title)

    def apply(children: ChildArg*) = {
      Component(
        Props()
      )(children: _*)
    }

  }

  object Body {
    case class Props()

    val Component = JsComponent[ObjectOrWritten[Props], Children.Varargs, Null](RawComponent.Body)

    def apply(children: ChildArg*) = Component(Props())(children: _*)

  }

  object Footer {
    case class Props(
        bsPrefix: js.UndefOr[String] = js.undefined
    )

    val Component = JsComponent[ObjectOrWritten[Props], Children.Varargs, Null](RawComponent.Footer)

    def apply(
        bsPrefix: js.UndefOr[String] = js.undefined
    )(children: ChildArg*) = Component(Props(bsPrefix))(children: _*)

  }

  val Component = JsComponent[ObjectOrWritten[Props], Children.Varargs, Null](RawComponent)

  def apply(
      onHide: IO[Unit],
      show: js.UndefOr[Boolean] = js.undefined,
      bsClass: js.UndefOr[String] = js.undefined,
      dialogComponentClass: js.UndefOr[String] = js.undefined,
      backdropClassName: js.UndefOr[String] = js.undefined,
      dialogClassName: js.UndefOr[String] = js.undefined,
      dialogAs: MyReactComponentClass[_] = DraggableModalDialogCp.Component,
      contentClassName: js.UndefOr[String] = js.undefined,
      size: js.UndefOr[String] = js.undefined,
      bsPrefix: js.UndefOr[String] = js.undefined,
      scrollable: js.UndefOr[Boolean] = js.undefined
  )(children: ChildArg*) = {
    val useOnHide:js.Function0[Unit] = ()=>onHide.unsafeRunAndForget()
    Component(
      Props(
        useOnHide,
        show,
        bsClass,
        dialogComponentClass,
        backdropClassName,
        dialogClassName,
        dialogAs,
        contentClassName,
        size,
        bsPrefix,
        scrollable
      )
    )(children: _*)
  }

}
